<template>
  <div class="main">
    <section>
      <div>
        <el-button type="primary" @click="dialogVisible = true" plain>新建分类关联</el-button>
      </div>
      <div class="marginT">
        <el-table v-loading="listLoading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row>
          <el-table-column align="left" prop="catId" label="后台分类ID"></el-table-column>
          <el-table-column align="left" prop="name" label="后台分类名称"></el-table-column>
          <el-table-column align="left" label="操作">
            <template slot-scope="scope">
              <el-button type="danger" plain @click="unbindComfir(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </section>
    <el-dialog title="新建后台分类关联" :visible.sync="dialogVisible" width="40%">
      <el-form :model="data" ref="form" label-width="120px" class="demo-baseMsgForm">
        <el-form-item label="上级分类:" prop="name">
          <span>{{data.parent.name}}</span>
        </el-form-item>
        <el-form-item label="分类名称:" prop="name">
          <span>{{data.name}}</span>
        </el-form-item>
        <el-form-item label="关联类目:" prop="name">
          <el-cascader :show-all-levels="false" expand-trigger="hover" :props='{value:"catId", label:"name"}' :options="backCatTree"
            v-model="data.backCatIds">
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="bindAndUnbindBackCat('',1)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/**
 * 后天关联分类列表
 */
import { getFrontCatBindBackCat, bindBackCat } from '@/api/goodMiddleStage'
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    backCatTree: {
      type: [Array],
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      list: [],
      backCatIds: [],
      listLoading: false,
      catOption: []
    }
  },
  created() {
    this.init()
  },
  watch: {
    data() {
      this.getList()
    }
  },
  methods: {
    init() {
      console.log(this.backCatTree)
      //   this.backCatTree = JSON.parse(JSON.stringify(this.backCatTree))
      this.generateCatTree(this.backCatTree)
      this.getList()
    },
    // 生成类目数 删除children为空的选项
    generateCatTree(val) {
      val.forEach(it => {
        if (it.children && it.children.length > 0) {
          this.generateCatTree(it.children)
        } else {
          delete it.children
        }
      })
    },
    // 获取后台类目数
    async getList() {
      try {
        const { data } = await getFrontCatBindBackCat({
          frontCatId: this.data.id
        })
        this.list = data.backCategoryList
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    // 解绑二次确认
    async unbindComfir(val) {
      try {
        await this.$confirm('是否删除当前分类关联?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this.bindAndUnbindBackCat(val, 0)
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 解绑 or 绑定类目属性组
    async bindAndUnbindBackCat(val, type = 1) {
      // type 1绑定， 0 解绑
      if (!val) {
        if (!this.data.backCatIds) {
          return this.$message.error('关联类目不能为空')
        }
        val = {
          backCatId: this.data.backCatIds.slice(-1)[0],
          bingAction: type,
          frontCatId: this.data.id
        }
      } else {
        val = {
          backCatId: val.catId,
          frontCatId: this.data.id,
          bingAction: type
        }
      }
      try {
        const { data } = await bindBackCat({ ...val })
        this.getList()
        this.$message.success('操作成功')
        this.dialogVisible = false
      } catch (error) {
        this.dialogVisible = false
        console.log(error)
      }
    },
    // 选择属性组
    chooseCat() {
      this.goodsMiddleStageCat().then(val => {
        this.bindOrUnBindAttr(val[0], 1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.marginT {
  margin-top: 20px;
}

.diag_search {
  display: flex;
  align-items: center;
  width: 60%;
  justify-content: space-evenly;
}
</style>